<template>
	<div id="contentBox">
		<div class="searchBox">
			<el-form :inline="true"  ref="searchForm"  :model="searchForm" label-width="96px">
				<el-form-item label="计算日期起" prop="startDate" >
				    <el-date-picker :editable="false"   
				      @change="debounceSeach"
				      v-model="searchForm.startDate"
				      type="date"
				      placeholder="选择日期"
				      :picker-options="startDateOpt"
				      >
				    </el-date-picker>
				</el-form-item>
				<el-form-item label="计算日期止" prop="endDate" >
				    <el-date-picker :editable="false"  
				      @change="debounceSeach"
				      v-model="searchForm.endDate"
				      type="date"
				      placeholder="选择日期"
				      :picker-options="endDateOpt"
				      >
				    </el-date-picker>
				</el-form-item>
	            <el-form-item label="订单号" prop="orderNumber" >
				    <el-input v-model="searchForm.orderNumber" placeholder="请输入搜索内容..." @input.native="debounceSeach"></el-input >
				</el-form-item>   
				<el-form-item style="">
				    <el-button @click="resetSearchForm('searchForm')">重置</el-button>
				</el-form-item>
			</el-form>
		</div>
		<div id="tableBox" style="margin:0 25px;" >
			<el-table :data="tableData.data" border  >
				<el-table-column label="计算日期" >
			      <template scope="scope">
			        <span >{{ scope.row.makeDate | parseTime('{y}-{m}-{d}')}}</span>
			      </template>
			    </el-table-column>
			    <el-table-column label="订单号">
			      <template scope="scope">
			        <span >{{ scope.row.orderNumber }}</span>
			      </template>
			    </el-table-column>
			    <el-table-column label="未还本金">
			      <template scope="scope">
			        <span >{{ scope.row.overplusCapital |toFixed2}}</span>
			      </template>
			    </el-table-column>
			    <el-table-column label="服务费比率">
			      <template scope="scope">
			        <span >{{ scope.row.interestRate|toFixed4 }}</span>
			      </template>
			    </el-table-column>
			    <el-table-column label="服务费2比率">
			      <template scope="scope">
			        <span >{{ scope.row.exceedRate|toFixed4 }}</span>
			      </template>
			    </el-table-column>
			    <el-table-column label="服务费" >
			      <template scope="scope">
			        <span >{{ scope.row.newInterest |toFixed2}}</span>
			      </template>
			    </el-table-column>
			    <el-table-column label="服务费2">
			      <template scope="scope">
			        <span >{{ scope.row.exceed |toFixed2}}</span>
			      </template>
			    </el-table-column>
			    <el-table-column label="创建日期" >
			      <template scope="scope">
			        <span >{{ scope.row.createDate | parseTime}}</span>
			      </template>
			    </el-table-column>
			</el-table>
			<div class="total">
				<p class="el-alert el-alert--success " style="margin-right:1%;">{{'服务费总额(大写) '  }} <span>{{orderNumberSum|convertCurrency}}</span> <span style="float:right;">(小写) <span>{{(orderNumberSum||0)|toFixed2}}</span></span></p>
				<p class="el-alert el-alert--success ">{{'服务费2总额：(大写) '  }} <span>{{dateSum|convertCurrency}}</span> <span style="float:right;">(小写) <span>{{(dateSum||0)|toFixed2}}</span></span></p>
			</div>
			<el-form :inline="true" ref="count"  class="count" label-width="120px" style="text-align: center;">
	            <el-form-item label="需重算的订单号" v-if="allButton||addButton">
	                <el-input v-model="orderNumber" placeholder="" ></el-input >
	            </el-form-item>
	            <el-form-item v-if="allButton||addButton">
				    <el-button type="primary" @click="countOrderNumber">重算当前订单服务费</el-button>
				</el-form-item>
	            <el-form-item label="需重算的日期" v-if="allButton||updateButton">
	                <el-date-picker :editable="false"   
				      v-model="date"
				      type="date"
				      placeholder="选择日期"
				      :picker-options="startDateOpt"
				      >
				    </el-date-picker>
	            </el-form-item>
	            <el-form-item v-if="allButton||updateButton">
				    <el-button type="primary" @click="countDate">重算此日期所有订单的服务费</el-button>
				</el-form-item>
	        </el-form>
	    </div>
		
	    <div class="block" style="text-align: center;margin-top: 15px;position:relative;">
	    	<pagination v-on:refreshSeachData="seachData"  :tableData="tableData" :searchForm="searchForm"></pagination>
		</div>
	</div>
</template>
<script src="./index.js">
	
</script>
<style scoped lang="stylus" rel="styleheet/stylus">
    .total{display:flex;margin-bottom:10px;}
	.total p{flex:1;width:49%;}
</style>
